    <style>
      :host {
        display: flex;
        flex-direction: column;
        outline: none;
        position: relative;
      }

      #header .title {
        color: var(--cr-primary-text-color);
        font-size: 108%;
        font-weight: 400;
        letter-spacing: .25px;
        margin-bottom: 12px;
        margin-top: var(--cr-section-vertical-margin);
        outline: none;
        padding-bottom: 4px;
        padding-top: 8px;
      }

      :host(:not(.expanded)) #card {
        background-color: var(--cr-card-background-color);
        border-radius: var(--cr-card-border-radius);
        box-shadow: var(--cr-card-shadow);
        flex: 1;
      }

      :host(.expanded) #header,
      :host([hidden-by-search]) {
        display: none;
      }
    </style>
    <div id="header">
      <h2 class="title" tabindex="-1"
          aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2>
    </div>
    <div id="card">
      <slot></slot>
    </div>
